<template>
  <div class="page-detail-content"  v-loading="loading">
    <div class="page-detail-author">
      <AuthorInfo :info="authorInfo" v-if="authorInfo" :createTime="contentInfo.createTime" />
    </div>
    <div class="page-deatil-content-cover" v-if="contentInfo.coverImage">
      <img :src="contentInfo.coverImage" alt="">
    </div>
    <div class="page-detail-content-title">
      <h1>{{contentInfo.title}}</h1>
    </div>
    <div v-html="contentInfo.content"></div>
  </div>
</template>

<script>
import { getPostDetail } from "@/api/post.js";
import { mark } from "@/lib/mark/index.js";
import AuthorInfo from "./AuthorInfo.vue"

export default {
  components: {
    AuthorInfo
  },
  computed: {
    postId() {
      return this.$route.params.id;
    },
  },
  data() {
    return {
      contentInfo: {
        title: "",
        content: "",
        coverImage: "",
      },
      authorInfo: null,
      loading: true
    };
  },
  mounted() {
    this.changeContentInfo();
  },
  methods: {
    async getContentInfo() {
      const res = await getPostDetail(this.postId);
      let { author_user_info, article_info } = res.data.data;
      let { content, mark_content, title, cover_image, ctime } = article_info;
      content = content ? content : mark(mark_content);
      const contentInfo = {
        title,
        content,
        coverImage: cover_image,
        createTime: ctime,
      };
      const authorInfo = author_user_info;
      return {
        authorInfo,
        contentInfo 
      }
    },
    async changeContentInfo() {
      const { contentInfo, authorInfo } = await this.getContentInfo();
      this.loading = false;
      this.contentInfo = contentInfo;
      this.authorInfo = authorInfo;
    },
  },
};
</script>

<style lang="less">
.page-detail-content {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 20px;
  min-height: 80vh;
  background: #FFFFFF;
  text-align: left;
  border-radius: 2px;

  .page-detail-content-title{
    padding: 10px;
  }

  .page-deatil-content-cover{
    img {
      width: 100%;
    }
  }

  .page-detail-author{
    margin-bottom: 10px;
  }

  img {
    max-width: 100%;
  }
}
@media screen and (max-width:800px) {
  .page-detail-content{
    width: 95%;
    margin: 0 auto;
  }
}
.hljs {
  overflow-x: auto;
  font-size: 16px;
  &::-webkit-scrollbar {
    width: 2px;
    height: 5px;
  }
  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 2px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #bfbfbf;
  }
  &::-webkit-scrollbar-corner {
    background: #179a16;
  }
  code {
    line-height: 28px;
  }
}
</style>